<script lang="ts" setup>
import { computed, h, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Time } from './time';
import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
import { useWatermark } from '@vben/hooks';
import {
  BookOpenText,
  CircleHelp,
  GiteeIcon,
  GitHubOutlined,
  UserOutlined,
} from '@vben/icons';
// packages\effects\layouts\src\widgets
import { Notification, UserDropdown } from '@vben/layouts';
import { preferences } from '@vben/preferences';
import { useAccessStore, useUserStore } from '@vben/stores';
import { openWindow } from '@vben/utils';

import { message } from 'ant-design-vue';

import { $t } from '#/locales';
import { resetRoutes } from '#/router';
import { useAuthStore, useNotifyStore } from '#/store';
import { useTenantStore } from '#/store/tenant';

const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();

const userStore = useUserStore();
const authStore = useAuthStore();
const accessStore = useAccessStore();
const router = useRouter();
const { destroyWatermark, updateWatermark } = useWatermark();

const tenantStore = useTenantStore();
const menus = computed(() => {
  const defaultMenus = [
    // {
    //   handler: () => {
    //     openWindow(VBEN_DOC_URL, {
    //       target: '_blank',
    //     });
    //   },
    //   icon: BookOpenText,
    //   text: $t('ui.widgets.document'),
    // },
    {
      handler: () => {
        router.push('/profile');
      },
      icon: UserOutlined,
      text: $t('ui.widgets.profile'),
    },
    // {
    //   handler: () => {
    //     openWindow('https://gitee.com/dapppp/ruoyi-plus-vben5', {
    //       target: '_blank',
    //     });
    //   },
    //   icon: () => h(GiteeIcon, { class: 'text-red-800' }),
    //   text: 'Gitee项目地址',
    // },
    // {
    //   handler: () => {
    //     openWindow(VBEN_GITHUB_URL, {
    //       target: '_blank',
    //     });
    //   },
    //   icon: GitHubOutlined,
    //   text: 'Vben官方地址',
    // },
    // {
    //   handler: () => {
    //     openWindow(`${VBEN_GITHUB_URL}/issues`, {
    //       target: '_blank',
    //     });
    //   },
    //   icon: CircleHelp,
    //   text: $t('ui.widgets.qa'),
    // },
  ];
  /**
   * 租户选中状态 不显示个人中心
   */
  if (tenantStore.checked) {
    defaultMenus.splice(1, 1);
  }
  return defaultMenus;
});

const avatar = computed(() => {
  return preferences.app.defaultAvatar;
});

async function handleLogout() {
  /**
   * 主动登出不需要带跳转地址
   */
  await authStore.logout(false);
  resetRoutes();
}

const notifyStore = useNotifyStore();
onMounted(() => notifyStore.startListeningMessage());
function handleViewAll() {
  message.warning('暂未开放');
}
</script>

<template>
  <div
    class="flex h-full min-w-0 flex-shrink-0 items-center"
    style="height: 70px"
  >
    <Notification
      :dot="notifyStore.showDot"
      :notifications="notifyStore.notifications"
      @clear="notifyStore.clearAllMessage"
      @make-all="notifyStore.setAllRead"
      @read="notifyStore.setRead"
      @view-all="handleViewAll"
    />
    <UserDropdown
      :avatar
      :menus
      :text="userStore.userInfo?.realName"
      description="ann.vben@gmail.com"
      tag-text="Pro"
      @logout="handleLogout"
    />
    <Time class="ml-[30px]" />
  </div>
</template>
<style scoped style="stylus">
.ant-layout-header {
  background-image: url('../assets/header.png');
  padding-inline: 36px;
  background-size: 100% 100%;
}
.logo {
  width: 520px;
  line-height: 70px;
  opacity: 1;
  text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.3);
  /** 文本1 */
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0px;
  color: rgba(237, 246, 255, 1);
  text-align: justify;
  vertical-align: top;
  font-family: '优设标题黑';
}
.ant-menu-dark {
  background: transparent;
  font-size: 20px;
  color: #d9e7ff;
}
::v-deep(.ant-menu-dark) .ant-menu-item-selected {
  background: transparent !important;
  text-shadow: -2px 1px 6px rgba(26, 228, 255, 1);
}
</style>
